<!-- 表单组件 -->
<template>
  <div>
    <el-input
      v-if="isInput"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      @input="handleInput"
      @keyup.enter.native="searchEnterFun"
      :maxlength="maxlength"
      :size="size"
      clearable>
    </el-input>
    <el-button size="mini" type="primary" v-if="currentVal === 'Hscode'">查看编码</el-button>

    <el-select
      style="width:100%"
      v-if="isSelect"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      :size="size"
      :clearable="clearable"
    >
      <el-option
        v-for="item in itemOptions.options"
        :disabled="item.disabled"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>

    <el-cascader
      ref="cascaderAddr"
      style="width:100%;"
      v-if="isCascader"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      :size="size"
      clearable
      :options="options"
      :props="{ expandTrigger: expandTrigger || 'hover', checkStrictly: checkStrictly === false, label: 'SubClass', value: 'value', ...props}"
      @change="handleChange">
    </el-cascader>
    <!--  @visible-change="elCascaderOnlick"
      @expand-change="elCascaderOnlick" -->

      <el-date-picker
        :class="dateRangeValCache && dateRangeValCache[1] === '' ? 'datePicker' : ''"
        style="width:100%"
        v-if="isDatePickerDateRange"
        v-model="currentVal"
        v-bind="bindProps"
        v-on="bindEvents"
        :type="itemOptions.type || 'datetimerange'"
        :size="size"
        clearable
        :picker-options="pickerOptions"
        :start-placeholder="dateRangeValCache && dateRangeValCache[0] !== '' ? dateRangeValCache[0] : '开始日期'"
        range-separator="至"
        :end-placeholder="dateRangeValCache && dateRangeValCache[1] === '' ? '至今' : '结束日期'"
        align="right"
        :value-format="itemOptions.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
        :default-time="['00:00:00', '23:59:59']"
      ></el-date-picker>

    <el-date-picker
      v-if="isDatePickerMonthRange"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      type="monthrange"
      :size="size"
      clearable
      start-placeholder="开始日期"
      range-separator="至"
      end-placeholder="结束日期"
      value-format="yyyy-MM"
    ></el-date-picker>

    <!-- others -->
    <el-date-picker
      style="width:100%"
      v-if="isDatePickerOthers"
      v-model="currentVal"
      v-bind="bindProps"
      v-on="bindEvents"
      type="date"
      :size="size"
      clearable
      placeholder="请选择日期"
      value-format="yyyy-MM-dd"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近三天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }],
        disabledDate(time) {
          return false; // 可根据需要限制日期
        }
      },
    };
  },
  props:{
    value: {},
    itemOptions: {
      type: Object,
      default () {
        return {
        }
      }
    },
    searchform: { // 新增 props
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    // 这里是为了显示至今做的处理
    dateRangeValCache () {
      return this.value
    },
    // 双向绑定数据值
    currentVal: {
      get () {
        // 处理日期范围选择时第二个值没有的情况
        if (this.isDatePickerDateRange && Array.isArray(this.value) && this.value[0] && !this.value[1]) {
          return null
        }

        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    },
    bindEvents() {
      return this.itemOptions.events || {};
    },
    // 绑定属性
    bindProps(){
      let obj = { ...this.itemOptions }
      // 移除冗余属性
      delete obj.label
      delete obj.prop
      delete obj.element
      delete obj.initValue
      delete obj.rules
      delete obj.events
      delete obj.size
      delete obj.clearable
      delete obj.maxlength
      if (obj.element === 'el-select' || obj.element === 'el-cascader') {
        delete obj.options
        delete obj.props
        delete obj.checkStrictly
        delete obj.expandTrigger
      }
      return obj
    },
    // 绑定方法
    bindEvents () {
      return this.itemOptions.events || {}
    },
    regular () {
      return this.itemOptions.regular || ''
    },
    size(){
      return this.itemOptions.size || ''
    },
    clearable(){
      return this.itemOptions.clearable === false ? false : true
    },
    maxlength(){
      return this.itemOptions.maxlength || ''
    },
    options() {
      return this.itemOptions.options || []
    },
    props() {
      return this.itemOptions.props || {}
    },
    checkStrictly () {
      return this.itemOptions.checkStrictly === false
    },
    expandTrigger () {
      return this.itemOptions.expandTrigger === false
    },
    // el-input
    isInput () {
      return this.itemOptions.element === 'el-input'
    },
    // el-select
    isSelect () {
      return this.itemOptions.element === 'el-select'
    },
    // el-cascader
    isCascader () {
      return this.itemOptions.element === 'el-cascader'
    },
    // el-date-picker (type: datetimerange/daterange)
    isDatePickerDateRange () {
      const isDatePicker = this.itemOptions.element === 'el-date-picker'
      const isDateRange = !this.itemOptions.type ||
      this.itemOptions.type === 'datetimerange' ||
      this.itemOptions.type === 'daterange'
      return isDatePicker && isDateRange
    },
    // el-date-picker (type: monthrange)
    isDatePickerMonthRange () {
      const isDatePicker = this.itemOptions.element === 'el-date-picker'
      const isMonthRange = this.itemOptions.type === 'monthrange'
      return isDatePicker && isMonthRange
    },
    // el-date-picker (type: other)
    isDatePickerOthers () {
      const isDatePicker = this.itemOptions.element === 'el-date-picker2'
      return isDatePicker && !this.isDatePickerDateRange && !this.isDatePickerMonthRange
    },
    
    
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    // 级联选项卡点击关闭下拉
    // elCascaderOnlick(){
    //   let that = this;
    //   setTimeout(function() {
    //     document.querySelectorAll(".el-cascader-node__label").forEach((el) => {
    //       el.onclick = function() {
    //         this.previousElementSibling.click();
    //         that.$refs.cascaderAddr.dropDownVisible = false;
    //       };
    //     });
    //   }, 100);
    // },

    handleChange(item){
      if(item){
        // this.ParentID  = item[item.length - 1]
        // this.ParentName = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels[0]
      }
    },
    handleInput(val) {
      let filteredValue = val;
      // 如果定义了 regular，则应用正则过滤
      if (this.regular) {
        const reg = new RegExp(this.regular, 'g'); // 将字符串转为正则表达式
        filteredValue = val.replace(reg, ''); // 替换不符合正则的字符为空
      }
      // 更新 currentVal
      this.currentVal = filteredValue;
      // 如果有 events.input，则调用它
      if (this.bindEvents && this.bindEvents.input) {
        this.bindEvents.input(filteredValue);
      }
    },
    searchEnterFun(e){
      let keyCode = window.event? e.keyCode:e.which;
      // let val = e.target.value;
      // if(keyCode == 13 && val){
      if(keyCode == 13){
        this.$emit('search')
      }
    },
  }
};
</script>
<style scoped lang='scss'>
/* @import url(); 引入css类 */
.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 420px;
}
.datePicker {
  ::placeholder {
    color: #606266;
  }
}
</style>
<style>
/* .el-cascader-panel .el-radio {
  display: none;
} */
</style>